<template>
  <div id="shoplist">
    <!-- <button @click="getproductLists">获取全部商品列表数据</button> -->
    <div class="shop_list">
      <span>全部雪场数量</span><span class="text_1">{{ this.scenicTotalNum }}</span><span>个,</span><span>上线票务数量</span><span
        class="text_2">{{ this.proAllNum }}</span><span>个</span>
    </div>

    <div class="snow_btn">
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="shop_input">
      <span>省份</span>
      <el-input placeholder="请选择" v-model="item_serach.provinceId">
      </el-input>
    </div>
    <div class="query_shop_1">
      <span>雪场名称</span>
      <el-input class="snow_name" v-model="item_serach.scenicName"></el-input>
    </div>
    <div class="query_3">
      <span>产品分类</span>
      <el-input placeholder="请选择" v-model="item_serach.productType">
      </el-input>
    </div>
    <div class="query_4">
      <span>产品名称</span>
      <el-input placeholder="请选择" v-model="item_serach.productName">


      </el-input>
    </div>
    <div class="query_5">
      <el-input class="snow_name" v-model="ipt_gjz" placeholder="请输入关键字"></el-input>
    </div>

    <div class="shop_list_footer">
      <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        :row-style="{height:'50px'}" :cell-style="{padding:'0px'}" tooltip-effect="dark" v-loading="loading">
        <el-table-column prop="productid" label="产品ID号" width="180">
        </el-table-column>
        <el-table-column prop="productname" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="fullname" label="所属雪场"> </el-table-column>
        <el-table-column prop="sale_count" label="已售数量"> </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column prop="useflag" label="上架"> </el-table-column>
        <el-table-column prop="returnflag" label="是否可退"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            <el-button type="text" @click="useflag_shop(scope.row)" size="small" v-if='scope.row.useflag==1'>上架
            </el-button>
            <el-button type="text" @click="useflag_shop(scope.row)" size="small" v-else>下架</el-button>
            <el-button @click="shoplist_delete(scope.row)" type="text" size="small"><span class="btn_sc">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage1" :page-size="pagesize" background layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>
<script>
  import { getproductLists, getchangeUseFlag } from "../../request/index";
  export default {
    data() {
      return {
        loading: false,
        channe2: 0,
        channel: 0,
        cardtf: false,
        pageChecked: true,
        input1: "",
        sousuok: false,
        tableData: [],
        multipleSelection: [],
        total: null,
        pagesize: null,
        currentPage: 1,
        ipt_gjz: "",
        ipt_name: "",
        scenicTotalNum: "",
        proAllNum: "",
        item_serach: {
          provinceId: "",
          scenicName: "",
          productType: "",
          productName: "",
          page: ""
        },
        tableData: [
          {
            date: "",
            name: "",
            address: "",
            shoplist: "",
            time: "",
            putaway: "",
            whether: "",
            sale_count: '',
          },
        ],
        currentPage1: 1,
      };
    },
    methods: {
      //搜索
      search() {
        console.log(111);
        getproductLists(
          this.item_serach
        ).then(res => {
          console.log(res);
          this.tableData = res.list
        })
      },
      //上下架接口
      useflag_shop(row) {
        this.$confirm('是否上下架该产品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.productid,
            useflag: row.useflag ? 0 : 1
          }
          getchangeUseFlag(data).then(res => {
            console.log(res);
            this.getproductLists();
            if (res.code == "666") {
              this.$message({
                message: res.msg,
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //商品删除接口
      shoplist_delete(row) {
        this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.productid,
            useflag: 3
          }
          getchangeUseFlag(data).then(res => {
            console.log(res);
            this.getproductLists();
            if (res.code == "666") {
              this.$message({
                message: "删除成功",
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      current_change: function (currentPage) {
        this.currentPage = currentPage;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      //翻页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        console.log("当前页：", val);
        this.loading = true


        setTimeout(() => {
          getproductLists({ page: val }).then(res => {
            console.log(res);
            console.log(res.pageNo, 'asdfsdf');
            this.tableData = res.list;
          })

          this.loading = false
        }, 1000)

      },

      getproductLists() {
        console.log(111);
        getproductLists().then((res) => {
          console.log(res, 'asdf');
          this.tableData = res.list;
          console.log(this.tableData);
          this.scenicTotalNum = res.scenicTotalNum;
          this.proAllNum = res.proAllNum;
          this.pagesize = res.pageSize
          this.total = res.count
          this.currentPage1 = parseInt(res.pageNo)
        });
      },
      handleClick() {
        console.log(111);
        this.$router.push({

        })
      }
    },
    mounted() {
      this.getproductLists();
    },
  };
</script>
<style scoped>
  tr.el-table__row {
    height: 12px !important;
  }

  .tiaoshu {
    position: absolute;
    left: 480px;
    bottom: 35px;
  }

  .cell {
    text-align: center;
  }

  .block {
    position: absolute;
    bottom: 30px;
    left: 530px;

  }

  .snow_footer {
    width: 100%;
    background-color: #fff;
    position: relative;
    top: 50px;
    border-radius: 10px;
    height: 650px;
  }

  .snow_btn {
    position: absolute;
    right: 10px;
    top: 62%;
  }

  .nav_hedr {
    width: 100%;
    height: 145px;
    background-color: #fff;
    position: relative;
    top: 20px;
    border-radius: 10px;
  }

  .snow_list {
    width: 1600px;
    height: 40px;
    background-color: #ebf4ff;
    position: absolute;
    left: 25px;
    top: 10px;
    border-radius: 5px;
  }

  .snow_list {
    line-height: 40px;
  }

  .text_1 {
    color: #3d85ff;
    font-size: 20px;
  }

  .text_2 {
    color: #3d85ff;
    font-size: 20px;
  }

  .snow_name {
    display: inline-block;
    width: 200px;
    height: 25px;
  }

  .query {
    position: absolute;
    left: 25px;
    top: 90px;
  }

  .el-input__inner {
    height: 35px;
    margin-left: 5px;
  }

  .el-aside {
    background-color: #2a354d;
    color: #f8f9fb;
    /* text-align: center; */
    line-height: 100vh;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 200px !important;
    vertical-align: revert;
  }

  .el-table th.el-table__cell {
    overflow: hidden;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #F2F6FC !important;
  }

  .el-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
  }

  .btn_sc {
    color: red !important;
  }

  .shop_list_footer {
    width: 100%;
    background-color: #fff;
    position: relative;
    top: 170px;
    border-radius: 10px;
    height: 630px;
  }

  .query_5 {
    position: absolute;
    left: 72%;
    top: 60%;
  }

  .query_4 {
    position: absolute;
    left: 53%;
    top: 60%;
  }

  div /deep/ .el-table th.el-table__cell {
    /* background-color: #f2f6fc; */
    overflow: hidden;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* background-color: #FFF; */
    background-color: #f2f6fc !important;
  }

  .query_3 {
    position: absolute;
    left: 35%;
    top: 60%;
  }

  .query_shop_1 {
    position: absolute;
    left: 17%;
    top: 60%;
  }

  .shop_input {
    position: absolute;
    left: 1%;
    top: 60%;
  }

  #shoplist {
    width: 100%;
    height: 145px;
    background-color: #fff;
    position: relative;
    top: 20px;
    border-radius: 10px;
  }

  .shop_list {
    width: 98%;
    height: 40px;
    background-color: #ebf4ff;
    position: absolute;
    left: 1%;
    top: 10px;
    border-radius: 5px;
    line-height: 40px;
  }

  div /deep/ .el-input el-input--suffix {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 208px;
  }
</style>